<template>
	
	<!-- 遮罩层部分 -->
	<view class="tanchuang" v-if="zhezhaokeshi" @click="closezhezhao">
		<view class="tanchuang_nr">
			<view class="tanchuang_nrbox" @click="goToZuqiu">
				<image class="tanchuang_nrbox_img" src="../../static/zuqiu.png"></image>
				<view class="tanchuang_nrbox_text">竞彩足球</view>
			</view>
			<view class="tanchuang_nrbox" @click="goToLanqiu">
				<image class="tanchuang_nrbox_img" src="../../static/lanqiu.png"></image>
				<view class="tanchuang_nrbox_text">竞彩篮球</view>
			</view>
			<view class="tanchuang_nrbox" @click="goToBeijingdanchang">
				<image class="tanchuang_nrbox_img" src="../../static/beijingdanchang1.png"></image>
				<view class="tanchuang_nrbox_text">北京单场</view>
			</view>
			<view class="tanchuang_nrbox" @click="goToPailiesan">
				<image class="tanchuang_nrbox_img" src="../../static/pailiesan.png"></image>
				<view class="tanchuang_nrbox_text">排列三</view>
			</view>
		</view>
	</view>
	
	<!-- title -->
	<view class="gendanbox">
		<view class="imagefadan" @click="showzhezhao">
			<image class="fadan" src="../../static/fd.png"></image>
			<view class="textfadan" >发单</view>
		</view>
		<view class="gendandating">
			<view class="textgendan">跟单大厅</view>
			<view class="imagetishi">
				<image class="tishi" src="../../static/ts.png" @click="goToBangzhu"></image>
			</view>
		</view>
		<view class="iconbox">
			<view class="imagesousuo">
				<image class="sousuo" src="../../static/ss.png" @click="goToSousuo"></image>
			</view>

			<view class="imagegeren">
				<image class="geren" src="../../static/gr.png" @click="goToZhanji"></image>
			</view>
		</view>
	</view>
	
	
	

	<!-- title2 -->
	<view class="tishibox">
		<view class="iamgetips">
			<image class="tips" src="../../static/ts.png"></image>
		</view>
		<view class="tipstext" @click="goToZhanjimoban">比赛变幻莫测，请控制金额理性跟单!</view>
	</view>
	<!-- title2 -->
	<view v-for="(category, id) in categories" :key="id" class="textbox">
		<view class="text3">{{ category.title }}</view>
		<view v-for="(item, idx) in category.items" :key="idx" class="box1">
			<view class="jiaobiao">1</view>
			<view class="image1">
				<image class="img1" :src="item.img"></image>
			</view>
			<view class="text4">{{ item.content }}</view>
		</view>
	</view>
	<view class="textbigbox2">
		<!-- tab栏 -->
		<view class="tabbox">
			<view v-for="(page, index) in pages" :key="index" class="text5">
				<view :class="{'active': current === index}" @click="checked(index)">
					{{ page.title }}
				</view>
			</view>
		</view>
		<!-- tab栏切换内容 -->
		<view style="width: 100%;height: 70vh;background-color: white;">
			<view v-for="(qhpage, index) in filteredSortedPages" :key="index" class="qhbox">
				<view class="qh1">
					<view class="image2">
						<image class="img2" :src="qhpage.img2"></image>
					</view>
					<view class="textbox1">
						<view class="qhtext">
							<view class="name">{{ qhpage.name }}</view>
							<view class="lian">{{ qhpage.lian }}</view>
						</view>
						<view class="huibao">{{ qhpage.huibao }}</view>
					</view>
					<view class="textbox2">
						<view class="jiezhi">{{ qhpage.jiezhi }}</view>
						<view class="shijian">{{ qhpage.shijian }}</view>
					</view>
				</view>
				<view class="textbox3">
					<view class="qianming">{{ qhpage.qianming }}</view>
				</view>
				<view class="qh2">
					<view class="textbox4">
						<view class="nr1">{{ qhpage.nr1 }}</view>
						<view class="nr2">{{ qhpage.nr2 }}</view>
					</view>
					<view class="textbox5">
						<view class="nr3">{{ qhpage.nr3 }}</view>
						<view class="nr4">{{ qhpage.nr4 }}</view>
					</view>
					<view class="textbox6">
						<view class="nr5">{{ qhpage.nr5 }}</view>
						<view class="image3">
							<image class="img3" :src="qhpage.img3"></image>
						</view>
					</view>
					<view class="textbox7">
						<button>跟单</button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				zhezhaokeshi: false,
				current: 0, // 默认选中第一个tab
				pages: [{
						index: 0,
						title: '命中率'
					},
					{
						index: 1,
						title: "跟单人气"
					},
					{
						index: 2,
						title: "自购金额"
					},
					{
						index: 3,
						title: "我的关注"
					}
				],
				qhpages: [{
						img2: "../../static/logo.png",
						name: "beixiang",
						lian: "3连红",
						huibao: "预计回报1.92倍",
						jiezhi: "截止时间",
						shijian: "09-07 17:15",
						qianming: "快来和我一起中大奖吧!",
						nr1: "竞彩足球",
						nr2: "2串1",
						nr3: "自购",
						nr4: "1800元",
						nr5: "人气",
						img3: "../../static/renqi4.png",
						mzl: 3,
						renqi: 50,
						jine: 1800,
						guanzhu: 0
					},
					{
						img2: "../../static/logo.png",
						name: "beixiang",
						lian: "2连红",
						huibao: "预计回报5倍",
						jiezhi: "截止时间",
						shijian: "09-07 17:15",
						qianming: "快来和我一起中大奖吧!",
						nr1: "竞彩足球",
						nr2: "2串1",
						nr3: "自购",
						nr4: "2000元",
						nr5: "人气",
						img3: "../../static/renqi5.png",
						mzl: 2,
						renqi: 100,
						jine: 2000,
						guanzhu: 1
					},
					{
						img2: "../../static/logo.png",
						name: "beixiang",
						lian: "4连红",
						huibao: "预计回报5倍",
						jiezhi: "截止时间",
						shijian: "09-07 17:15",
						qianming: "快来和我一起中大奖吧!",
						nr1: "竞彩足球",
						nr2: "2串1",
						nr3: "自购",
						nr4: "3000元",
						nr5: "人气",
						img3: "../../static/renqi3.png",
						mzl: 4,
						renqi: 20,
						jine: 3000,
						guanzhu: 1
					},
					{
						img2: "../../static/logo.png",
						name: "beixiang",
						lian: "2连红",
						huibao: "预计回报1.92倍",
						jiezhi: "截止时间",
						shijian: "09-07 17:15",
						qianming: "快来和我一起中大奖吧!",
						nr1: "竞彩篮球",
						nr2: "2串1",
						nr3: "自购",
						nr4: "5000元",
						nr5: "人气",
						img3: "../../static/renqi2.png",
						mzl: 2,
						renqi: 10,
						jine: 5000,
						guanzhu: 1
					},
					{
						img2: "../../static/logo.png",
						name: "beixiang",
						lian: "1连红",
						huibao: "预计回报50倍",
						jiezhi: "截止时间",
						shijian: "09-07 17:15",
						qianming: "快来和我一起中大奖吧!",
						nr1: "竞彩篮球",
						nr2: "5串1",
						nr3: "自购",
						nr4: "50000元",
						nr5: "人气",
						img3: "../../static/renqi1.png",
						mzl: 1,
						renqi: 1,
						jine: 50000,
						guanzhu: 0
					}
				],
				categories: [{
						title: '一战成名',
						items: [{
								img: '/static/login_huolonguo_image.png',
								content: '爱玩火龙果',
							},
							{
								img: '../../static/logo.png',
								content: '2345',
							},
							{
								img: '../../static/logo.png',
								content: '5647',
							},
							{
								img: '../../static/logo.png',
								content: '1234',
							},
						],
					},
					{
						title: '命中榜',
						items: [{
								img: '../../static/logo.png',
								content: '1222',
							},
							{
								img: '../../static/logo.png',
								content: '4321',
							},
							{
								img: '../../static/logo.png',
								content: '6547',
							},
							{
								img: '../../static/logo.png',
								content: '1234',
							},
						],
					},
					{
						title: '盈利榜',
						items: [{
								img: '../../static/logo.png',
								content: '1111',
							},
							{
								img: '../../static/logo.png',
								content: '22221',
							},
							{
								img: '../../static/logo.png',
								content: '3333',
							},
							{
								img: '../../static/logo.png',
								content: '4444',
							},
						],
					},
				],
			};
		},

		computed: {
			filteredSortedPages() {
				return this.sortPages(this.current);
			}
		},
		methods: {
			goToBeijingdanchang() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/beijingdanchang/beijingdanchang'
				});
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			goToPailiesan() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/pailiesan/pailiesan'
				});
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			goToZuqiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jingcaizuqiu/jingcaizuqiu'
				});
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			goToLanqiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jingcailanqiu/jingcailanqiu'
				});
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			showzhezhao() {
				this.zhezhaokeshi = true; // 点击图片时，显示弹窗
			},
			closezhezhao(event) {
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			goToBangzhu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/bangzhu/bangzhu'
				});
			},
			goToSousuo() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/sousuo/sousuo'
				});
			},
			goToZhanji() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/wodezhanji/wodezhanji'
				});
			},
			goToZhanjimoban() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/peoplezhanjimoban/peoplezhanjimoban'
				});
			},
			checked(index) {
				this.current = index;
			},
			sortPages(index) {
				// 创建 qhpages 的一个深拷贝以避免直接修改原数组
				let sortedPages = [...this.qhpages]; // 使用扩展运算符创建数组副本
				switch (index) {
					case 0: // 命中率
						sortedPages.sort((a, b) => b.mzl - a.mzl);
						break;
					case 1: // 跟单人气
						sortedPages.sort((a, b) => b.renqi - a.renqi);
						break;
					case 2: // 自购金额
						sortedPages.sort((a, b) => b.jine - a.jine);
						break;
					case 3: // 我的关注

						// 过滤出 guanzhu 为 1 的内容
						sortedPages = sortedPages.filter(page => page.guanzhu === 1);
						break;
					default:
						// 默认不进行任何操作
						break;
				}
				return sortedPages;
			}
		}
	};
</script>

<style scoped>
	page {
		background-color: #f9f9f9;
		;
	}

	/* title1 */
	.gendanbox {
		background-color: #e23234;
		height: 50px;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-around;
		/* 元素平均分布 */
	}

	.imagefadan,
	.imagetishi,
	.imagesousuo,
	.imagegeren,
	.iamgetips {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.fadan,
	.tishi,
	.sousuo,
	.geren,
	.tips {
		/* 统一设置宽高，如果有不同可以单独设置 */
		width: 16px;
		height: 16px;
	}

	.sousuo {
		width: 19px;
		height: 19px;
	}

	.geren {
		width: 19px;
		height: 19px;
	}

	.gendandating {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.textgendan {
		margin-left: 5px;
		/* 跟单大厅与图标之间的间距 */
		margin-right: 5px;
		/* 跟单大厅与图标之间的间距 */
		font-size: 19px;
		color: #fff;
	}

	.imagesousuo,
	.imagegeren {
		margin-left: 5px;
		/* 跟单大厅与图标之间的间距 */
		margin-right: 5px;
	}

	.iconbox {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.textfadan {
		font-size: 14px;
		color: #fff;
		margin-left: 5px;
		/* 发单文字与图标之间的间距 */
	}

	/* 提示部分 */
	.tishibox {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #faac25;
		color: #fff;
		font-size: 14px;
	}

	.iamgetips {
		margin-right: 5px;
		/* 与文本的间距 */
	}

	/* title2 */

	.textbox {
		display: flex;
		width: 100%;
		padding: 3%;
		background-color: white;
		margin-bottom: 3%;
		height: 85px;
	}

	.text3 {
		/* width: 25px;
		font-size: 15px;
		color: red;
		writing-mode: vertical-rl; */
		/* width: 26px; */
		letter-spacing: 6px;
		font-size: 15px;
		color: red;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}

	.box1 {
		/* width: 16%;
		padding: 2%;
		margin-left: 2%; */
		flex: 1;
	}

	.img1 {
		/* width: 70rpx;
		height: 70rpx;
		border-radius: 50px; */
		width: 70rpx;
		height: 70rpx;
		border-radius: 50px;
		display: block;
		margin: 0 auto;
	}

	.image1 {
		/* width: 60%;
		margin: 0 auto; */
		width: 70%;
		margin: 0 auto;
		padding-top: 10%;
	}

	.jiaobiao {
		/* 	width: 14px;
		height: 14px;
		text-align: center;
		font-size: 7px;
		font-size: 9px;
		position: absolute;
		color: rgb(255, 255, 255);
		transform: translateY(0px) translateX(0px);
		background-color: #fa3534;
		border-radius: 50%;
		right: 15px; */
		width: 14px;
		height: 14px;
		text-align: center;
		font-size: 7px;
		font-size: 9px;
		position: absolute;
		color: rgb(255, 255, 255);
		transform: translateY(0px) translateX(0px);
		background-color: #fa3534;
		border-radius: 50%;
		/* right: 15px; */
		margin-left: 15%;
		margin-top: 2%;
	}

	.text4 {
		/* 	width: 100%;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; */
		/* 显示不下.... */

		width: 70%;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 0 auto;
	}

	/* tab栏样式 */
	.tabbox {
		width: 100%;
		display: flex;
		padding: 3% 0;
		background-color: white;
		justify-content: center;
		align-items: center;
	}

	.text5 {
		width: 25%;
		text-align: center;
		margin-bottom: 10rpx;
		background-color: white;

	}

	/* 点击切换栏样式 */
	/* 	.tabbox .qhbox {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
	
		} */

	.active {
		/* margin-top: 5rpx; */
		/* 	padding-top: 5rpx; */
		position: relative;
		color: rgb(226, 50, 52);
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		height: 5rpx;
		background-color: rgb(226, 50, 52);
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: -10rpx auto;
	}

	/* 切换栏 */

	.qhbox {
		width: 96%;
		padding: 2%;
		border-bottom: 1px solid #bdbdcd;
		background-color: white;
	}

	.qh1 {
		width: 100%;
		display: flex;
	}

	/* 	.image2 {
		width: 15%;
	} */

	.img2 {
		/* width: 70rpx;
		height: 70rpx;
		border-radius: 50px;
		margin-right: 9px; */
		width: 70rpx;
		height: 70rpx;
		border-radius: 50px;
		margin-right: 9px;
		display: block;
	}

	.textbox1 {
		width: 42.5%;
	}

	.qhtext {
		display: flex;
	}

	.textbox2 {
		width: 42.5%;
		text-align: right;
	}

	.textbox3 {
		padding: 2% 0;
	}

	.qh2 {
		display: flex;
		width: 100%;
		text-align: center;
	}

	.textbox4 {
		width: 25%;
	}

	.textbox5 {
		width: 25%;
	}

	.textbox6 {
		width: 25%;
	}


	.img3 {
		width: 100%;
		height: 10px;
	}

	.textbox7 {
		width: 25%;
	}

	button {
		width: 64%;
		height: 25px;
		margin: 0 auto;
		font-size: 10px;
		background: #e23234;
		color: white;
	}

	.name {
		color: black;
		font-size: 30rpx;
		margin-right: 10px;
	}

	.lian {
		color: #f2a218;
		border: 1px solid #f2a218;
		font-size: 14px;
		height: 20px;
	}

	/* 切换栏文字样式 */
	.huibao {
		color: #bdbdcd;
		font-size: 20rpx;
	}

	.qianming {
		color: black;
		font-size: 25rpx;
		margin-left: 10px;
	}

	.jiezhi {
		color: #bdbdcd;
		font-size: 30rpx;
	}

	.shijian {
		color: red;
		font-size: 22rpx;
	}

	.nr1 {
		font-size: 25rpx;
		color: black;
	}

	.nr2 {
		font-size: 25rpx;
		color: red;
	}

	.nr3 {
		font-size: 25rpx;
		color: black;
	}

	.nr4 {
		font-size: 25rpx;
		color: red;
	}

	.nr5 {
		font-size: 25rpx;
		color: black;
	}


	/* 以下是遮罩层部分的样式 */
	.tanchuang {
		position: fixed;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9999;
		/* 确保它在最顶层 */
	}

	.tanchuang_nr {
		background-color: white;
		/* display: flex; */
		margin-top: 12%;
		width: 40%;
	}

	.tanchuang_nrbox {
		display: flex;
		align-items: center;
		/* width: 130px; */
		padding: 2% 10%;
		/* border-buttom: 1px solid; */
		border-bottom: 1px solid #f5f5f5;
	}

	.tanchuang_nrbox_img {
		width: 36px;
		height: 36px;
		display: block;
	}

	.tanchuang_nrbox_text {

		color: #303133;
		font-size: 14px;
	}
</style>
